<template>
  <div class="contain">
    <div class="content">
      <div class="title">
        <p>各奖项数量统计</p>
        <img src="../assets/con2.png" alt="" />
      </div>
      <div class="image" ref="bar"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center; /* 水平居中内容 */
  .content {
    width: 90%; /* 盒子内容的宽度为盒子宽度的90% */
    background: url(../assets/con1.png) no-repeat;
    background-size: cover;
    background-position: center 10px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 22px;
      text-align: left;
      font-weight: bold;
      p {
        margin: 12px 0 0 0;
      }
    }

    .image {
      width: 100%;
      height: 110%;
    }
  }
}
</style>

<script setup lang="ts">
import * as echarts from 'echarts'
import { reqBar1 } from '@/api/conn'
import { ref, onMounted, watch, reactive } from 'vue'
import useCounterStore from '@/stores/counter'

let bar = ref()
let counterStore = useCounterStore()
let data1 = reactive([])
let data2 = reactive([])
let data3 = reactive([])

onMounted(() => {
  fetchData()
})
watch(
  () => counterStore.province,
  () => {
    fetchData()
  }
)
const fetchData = async () => {
  const { province } = counterStore
  let result: any = await reqBar1(province)
  if (result.status == 200) {
    data1 = result.data[0].count
    data2 = result.data[1].count
    data3 = result.data[2].count
    initCharts()
  } else console.log('404')
}

const initCharts = async () => {
  const chart = echarts.init(bar.value)

  chart.setOption({
    textStyle: {
      color: 'white', // 设置文字颜色为白色
      fontWeight: 'bold'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['自然科学奖', '技术发明奖', '科学技术进步奖'],
      right: 0, // 调整图例位置：距离右侧 20px
      top: 20, // 调整图例位置：距离顶部 20px
      textStyle: {
        color: 'white', // 设置文字颜色为白色
        fontWeight: 'bold'
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: ['2021', '2022', '2023']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '自然科学奖',
        type: 'bar',
        data: data1
      },
      {
        name: '技术发明奖',
        type: 'bar',
        data: data2
      },
      {
        name: '科学技术进步奖',
        type: 'bar',
        data: data3
      }
    ]
  })
}
</script>
